<template>
	<div class="page">
		<!--顶部导航栏-->
		<div class="top-menu">
			<!--logo-->
			<div class="logo">
			</div>
			<div class="title">鸽子网</div>
			<div class="menu-content">
				<!--菜单-->
				<div class="menu-item">
					<router-link to="/"><el-link type="primary">首页</el-link></router-link>
				</div>
				<div class="menu-item" v-if="currentuser.lastName">
					<router-link to="/mine"><el-link type="primary">我的发布</el-link></router-link>
				</div>
				<div class="menu-item" v-if="currentuser.lastName">
					<router-link to="/fans"><el-link type="primary">我的关注</el-link></router-link>
					
				</div>
				<div class="menu-item" v-if="currentuser.lastName">
					<router-link to="/myfavorite"><el-link type="primary">我的收藏</el-link></router-link>
					
					
				</div>
				
				
				<div class="menu-item" v-if="!currentuser.lastName" @click="goLogin">登录</div>
				<div class="menu-item" v-if="currentuser.lastName">
					<router-link to="/user"><el-link type="primary">{{currentuser.lastName}}</el-link></router-link>
				</div>
				<div class="menu-item linkbutton" v-if="currentuser.lastName" @click="goExit">注销</div>
				
			</div>
		</div>
		<router-view />
		
	</div>
	
</template>
<script>
	export default{
		data(){
			return {
				
				currentuser:{}
			}
		},
		methods:{
			
			goLogin(){
				this.$router.push("/login")
			},
			goExit(){
				this.currentuser={};
				localStorage.removeItem("token");
				localStorage.removeItem("userInfo");
			}
		},
		mounted(){
			console.log("导航栏初始化");
			this.currentuser=JSON.parse(localStorage.getItem("userInfo"));
		}
	}
</script>

<style>
*{
		margin: 0;
		padding: 0;
		outline: 0;
	}
	.page {
			font-family: "微软雅黑";
			margin: 0;
			padding: 0;
			width: 100%;
			min-height: 100vh;
			min-width: 900px;
			box-sizing: border-box;
			position: relative;
			display: block;
			/* background:url(../assets/780.jpg) no-repeat; */
		}
	.top-menu{
		height:60px;
		width:100%;
		display:flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		background-color:rgba(0,0,0,0 );
		border-bottom:1px solid rgba(200,200,200,0.4);
		color:#404040;
	}
	.logo{
		width:40px;
		height:40px;
		background-image:url("../assets/gezilogo.png");
		background-size: cover;
	}
	.title{
		font-size:120%;
		font-weight:600;
		margin-left:10px;
	}
	.menu-content{
		flex:1;
		height:60px;
		width:100%;
		display:flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-end;
		
	}
	.menu-content .menu-item{
		margin:0 20px;
		cursor:pointer;
		font-weight:600;
	}
	.menu-item a{
		text-decoration: none;
	}
	.menu-item.linkbutton{
		font-weight:100;
		font-size:80%;
	}
	
</style>
